<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/MyVideo.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 导入 Vue 3 -->
    <script src="//unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery.params.js"></script>
</head>
<body>
<div class="modal-body" id="app">
    <form role="form" style="padding-left: 550px">
        <div class="form-group" style="padding-left: 35px">
            <label class="form-inline">uid:
                <input name="uid" v-model="person.uid" type="text" class="form-control" id="uid" style="width: 200px"
                       readonly/>
            </label>
        </div>
        <div class="form-group" style="padding-left: 13px">
            <label class="form-inline">用户名:
                <input name="uname" v-model="person.uname" type="text" class="form-control" id="name"
                       style="width: 200px"/>
            </label>
        </div>
        <div class="form-group">
            <label class="form-inline">个人简介:
                <input name="ucomment" v-model="person.ucomment" type="text" class="form-control" id="comment"
                       style="width: 200px"/>
            </label>
        </div>
        <div class="form-group" style="padding-left: 13px">
            <label class="form-inline">手机号:
                <input name="uphone" v-model="person.uphone" type="text" class="form-control" id="phone"
                       style="width: 200px"/>
            </label>
        </div>
        <div class="form-group" style="padding-left: 13px">
            <label class="form-inline">邮箱号:
                <input name="uemail" v-model="person.uemail" type="text" class="form-control" id="email"
                       style="width: 200px"/>
            </label>
        </div>
        <div class="form-group" style="padding-left: 65px">
            <label class="form-inline">
                <input type="button" value="保存" style="width: 200px;background-color: #00b5e5" @click="update"/>
            </label>
        </div>

    </form>
</div>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                person: {}
            }
        },
        created() {
            if (JSON.parse(localStorage.getItem("person")) != null) {
                this.person = JSON.parse(localStorage.getItem("person"))
            } else {
                layer.msg('尚未登录，请先登录!')
            }
        },
        methods: {
            update() {
                if (this.person.uname===null || this.person.uname.trim().length===0){
                    layer.msg('用户名不能为空')
                }else {
                    axios({
                        method: 'post',
                        url: '/users/update',
                        params: {
                            uid: this.person.uid,
                            uname: this.person.uname,
                            ucomment: this.person.ucomment,
                            uphone: this.person.uphone,
                            uemail: this.person.uemail,
                        }
                    }).then(response =>{
                        if (response.data.code === 20031){
                            this.person=response.data.data
                            localStorage.setItem("person",JSON.stringify(this.person))
                            layer.msg('保存成功！')
                        }else {
                            layer.msg('服务器繁忙!')
                        }
                    })
                }

            }
        }
    }).mount("#app")
</script>
</body>
</html>